<template>
  <div class="article-form form-contain">
    <div class='article-box'>
      <div class='article-content'>
        <!-- 跳转详情 -->
        <div class='article-head'>
          <el-button type="primary" size="small" @click="modelShow = true">新增分类</el-button>
        </div>
        <!-- 筛选 -->
        <div class='article1-select'>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="cat_name"
              label="分类名称">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width='500'>
              <template slot-scope="scope">
                <el-button @click="editId(scope.row)" type='primary' size="mini">编辑</el-button>
                <el-button @click="delCategory(scope.row.id)" type='primary' size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="modelShow" :before-close="restModel">
      <div>
        <span><span style="color:rgb(229, 28, 35)">*</span>分类名称</span>
        <el-input
        :maxlength="4"
        v-model="form.cat_name"
        placeholder="不能超过4个字符"
        style="width:240px;margin-left:20px"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modelShow = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCategory, delCategory, addCategory } from '@/api/login'

export default {
  data () {
    return {
      modelShow: false,
      tableData: [],
      edit_id: null,
      form: {
        cat_name: ''
      }
    }
  },
  created () {
    this.loadList()
  },
  methods: {
    loadList () {
      getCategory().then((res) => {
        if (res.code === 1) {
          this.$set(this, 'tableData', res.data)
        }
      })
    },
    restModel (done) {
      this.edit_id = null
      this.form.cat_name = ''
      done()
    },
    delCategory (id) {
      this.$confirm('此操作将删除分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delCategory({
          id: id
        }).then((res) => {
          if (res.code === 1) {
            this.$message({
              message: '删除成功！',
              type: 'success'
            })
            this.loadList()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    editId (row) {
      this.edit_id = row.id
      this.form.cat_name = row.cat_name
      this.modelShow = true
    },
    addCategory () {
      let reg = /^([\u4e00-\u9fa5]){1,4}$/
      if (reg.test(this.form.cat_name)) {
        let params = this.edit_id ? {id: this.edit_id, cat_name: this.form.cat_name} : {cat_name: this.form.cat_name}
        addCategory(params).then((res) => {
          if (res.code === 1 || res.code === 2) {
            this.$message({
              message: this.edit_id ? '修改成功！' : '添加成功！',
              type: 'success'
            })
          } else {
            this.$message.warning(res.msg)
          }
          this.loadList()
          this.form.cat_name = ''
          this.modelShow = false
          this.edit_id = null
        })
      } else {
        this.$message({
          message: '分类只能为中文',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style lang='less'>
  .article-form{
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    .article-box{
      .article-content{
        background: #ffffff;
        .article-head{
          margin-bottom: 40px;
        }
        .article1-select{
          min-height: 500px;
        }
      }
    }
  }
</style>
